<!-- 电子健康卡 -->
<template>
	<div>
		<div class="wrap" v-for="item in userCardList">
			<div class="card-face-container">
				<image class="card-bg" src="https://zhyl.setupgx.cn/attachment/app/cardnewbg.png" alt=""></image>
				<div class="card-top-info">
					<div class="card-top-org">海南省卫生健康委员会</div>
					<div class="card-top-title">
						<img src="https://zhyl.setupgx.cn/attachment/app/icon2.png" alt="" />
						<span>电子健康卡</span>
					</div>
				</div>

				<div class="card-detail-info">
					<div class="card-user-info">
						<span class="card-user-name">{{item.names}}</span>
						<span class="card-user-id">{{basecclusion(item.idcard, 6, 4)}}</span>
					</div>
					<div class="card-qrcode">
						<!-- <img class="card-qrcode-logo" src="img/logo_.png" alt="" /> -->
						<!-- <img src="https://zhyl.setupgx.cn/attachment/app/qrcode.png" alt="" /> -->
						<u-button type="primary" text="去展码" size="normal"
							@click="showJianKangKaSC(item.ecard_no)"></u-button>
					</div>
				</div>

				<div class="card-footer">
					中华人民共和国国家卫生健康委员会监制
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userCardList: [],
				userInfos: []
			}
		},
		onLoad() {
			this.api_cardlist()
		},
		methods: {
			api_cardlist() {
				let openid = uni.getStorageSync('openid')
				this.$app._post_form("entry/wxapp/apipatient.cardlist", {
					'openid': openid
				}, (res) => {
					if (res.status === 1) {
						this.userCardList = res.data
						console.log(this.userCardList)
					}
				})
			},
			showJianKangKaSC(ecard_no) {
				let current_user_card = uni.getStorageSync('current_user_card')
				uni.navigateTo({
					url: 'plugin://healthCardPlugins/healthcode?hospitalId=37868&healthCardId=' + ecard_no
				})
			},
			basecclusion(data, frontShow, afterShow) {
				if (data.length <= afterShow) return "";

				let dataLengh = data.length;
				if (dataLengh > frontShow + afterShow) {
					let obscuringStar = '*';
					// 计算中间星星数
					for (let i = 0; i < dataLengh - frontShow - afterShow; i++) {
						obscuringStar += '*';
					}
					return data.substring(0, frontShow) + obscuringStar + data.substring(data.length - afterShow, data
						.length);
				} else {
					return '—'; // 不规范时返回'-'
				}
			}
		}
	}
</script>

<style scoped>
	.wrap {
		background: #f4f4f4;
		width: 100%;
		min-height: 99%;
		padding-top: 1%
	}

	.card-face-container {
		height: 200px;
		width: 98%;
		margin: 0 auto;
		position: relative;
		color: #000000;
	}

	.card-face-container .card-bg {
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.card-face-container .card-top-info {
		position: absolute;
		top: .23rem;
		width: 100%;
		padding: 8px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.card-face-container .card-top-info .card-top-org {
		font-size: .7rem;
		line-height: .25rem;
	}

	.card-face-container .card-top-info .card-top-title {
		display: flex;
		align-items: center;
		font-size: .9rem;
		line-height: .42rem;
		color: #2B2B2B;
	}

	.card-face-container .card-top-info .card-top-title img {
		height: 1.3rem;
		width: 1.3rem;
		margin-right: .08rem;
	}

	.card-face-container .card-detail-info {
		position: absolute;
		bottom: 35px;
		width: calc(100% - .34rem - .15rem);
		padding: 0 .15rem 0 .34rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.card-face-container .card-detail-info .card-user-info {
		font-size: .36rem;
		color: #2B2B2B;
	}

	.card-face-container .card-detail-info .card-user-info .card-user-name {
		font-size: 1.2rem;
		height: .5rem;
	}

	.card-face-container .card-detail-info .card-user-info .card-user-id {
		font-size: 1rem;
		line-height: .3rem;
		display: block;
		padding-top: .12rem;
	}

	.card-face-container .card-detail-info .card-qrcode {
		background: #FFFFFF;
		padding: .04rem;
		position: relative;
	}

	.card-face-container .card-detail-info .card-qrcode .card-qrcode-logo {
		height: .44rem;
		width: .44rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.card-face-container .card-detail-info .card-qrcode img {
		height: 100px;
		width: 100px;
	}

	.card-face-container .card-footer {
		position: absolute;
		font-size: 0.7rem;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
		letter-spacing: 0;
		line-height: .25rem;
	}
</style>